<template>
  <el-menu
    :default-active="curPath"
    class="el-menu-vertical-fix"
    background-color="#00152b"
    text-color="#fff"
    :collapse="isCollapse"
    :collapse-transition="false"
  >
    <MenuItem :menu-data="filterMenu" />
  </el-menu>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import MenuItem from './MenuItem.vue'
import useAppStore from '@/store/modules/app'

const appStore = useAppStore()
const routeStore = useRoute()
// 筛选要展示的路径
const filterMenu = computed(() => {
  return appStore.menuData.filter((item) => item.meta?.show)
})

// 当前路由选中
const curPath = computed(() => routeStore.path)
const isCollapse = computed(() => {
  return !appStore.sideOpenFlag
})
</script>

<style scoped lang="scss">
.el-menu-vertical-fix {
  border-right: none;
}
</style>
